<template>
  <el-card class="print-wrap">
    <template #header>
      <div class="print-btns">
        <div class="print-paperTypes">
          <span>新增标签条</span>
        </div>
        <!-- <el-button type="primary" @click="print">打印</el-button> -->
      </div>
    </template>

    <div class="print-steps" v-if="isNewAdd">
      <el-steps :active="activeStep" finish-status="success">
        <el-step title="标签条" />
        <el-step title="打印配置" />
      </el-steps>
    </div>

    <LabelConfig
      v-if="activeStep === 0"
      :batchno="batchno"
      :labelCodes="labelCodes"
      :ids="ids"
      :isNewAdd="isNewAdd"
      @next="onNext"
    ></LabelConfig>
    <PrintConfig
      v-if="activeStep === 1"
      :batchno="batchno"
      :labelCodes="labelCodes"
      :ids="ids"
      :isNewAdd="isNewAdd"
      @prev="onSteps"
    ></PrintConfig>
  </el-card>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import api from "@/api/label.js";
import LabelConfig from "./components/labelConfig.vue";
import PrintConfig from "./components/printConfig.vue";

const activeStep = ref(0);
const route = useRoute();
const labelCodes = ref([]);
const ids = ref([]);
const batchno = ref();
const labels = ref([]);
const isNewAdd = ref(1);
function onNext(arr) {
  labels.value = arr;
  onSteps();
}

function onSteps() {
  activeStep.value = activeStep.value === 1 ? 0 : 1;
}

onMounted(async () => {
  if (route.query.batchno) {
    isNewAdd.value = 0;
    activeStep.value = 1;
    batchno.value = route.query.batchno;
    const res = await api.getLabelCodeByPrintBatchno(route.query);
    if (res.data) {
      labelCodes.value = res.data;
    }
  } else if (route.query.labelCodes || route.query.ids) {
    isNewAdd.value = 0;
    activeStep.value = 1;
    labelCodes.value = route.query.labelCodes
      ? JSON.parse(route.query.labelCodes)
      : [];
    ids.value = route.query.ids ? JSON.parse(route.query.ids) : [];
  }
});
</script>
<style lang="scss" scoped>
.print-wrap {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  overflow: hidden;
}
:deep(.el-card__header) {
  padding-top: 10px;
  padding-bottom: 10px;
}
.print-btns {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
}
:deep(.el-card__body) {
  overflow-y: auto;
}
.print-paperTypes {
  display: flex;
  align-items: center;
}
.print-steps {
  width: 68%;
  margin: 0 auto 20px;
}
</style>
